import React, { ReactElement } from 'react'
import { History } from 'history'
import { CaretRightOutlined } from '@ant-design/icons'
import { CaseSchema } from '@src/components/Schema/CaseSchema'
import style from './Index.module.less'
import icon from '@imgs/accord-icon.png'
import { filterEmptyText } from '@js/tool'

interface Props {
  caseDetail: CaseSchema
  history: History
}

function Main ({ caseDetail, history }: Props): ReactElement {
  return (
    <div className={style.container}>
      <div className={style.header}>
        <img src={icon} alt="" />
        <span>仲裁依据</span>
      </div>
      <div className={style.block} onClick={() => history.push(`/admin/case-edit/${caseDetail.id}/accord`)}>
        <div className={style['block-left']}>
          <div className={style['block-left-title']}>仲裁依据</div>
          <div className={style['block-left-content']}>{filterEmptyText(caseDetail.basis)}</div>
        </div>
        <div className={style['block-right']}>
          <CaretRightOutlined />
        </div>
      </div>
    </div>
  )
}

export default Main
